<template>
  <div class="app-container">
    <ol class="ol-content">
      <li v-for="item in list" :key="item.id" class="li-content">
        <div id="Box">
          <div id="content">
            <div>
              <span>{{ item.name }}</span>
              <p><b>描述：</b> {{ item.description }}</p>
            </div>
            <div>
              <i class="el-icon-view">查看</i>
              <i class="el-icon-delete">删除</i>
            </div>
          </div>
        </div>
      </li>
    </ol>
  </div>
</template>

<script>
import { getTestcaseSuite } from '@/api/testcase'

export default {
  data() {
    return {
      list: null
    }
  },
  created() {
    this.fetchSuiteData()
  },
  methods: {
    fetchSuiteData() {
      getTestcaseSuite().then(response => {
        this.list = response.data.items
      })
    }
  }
}
</script>

<style lang="scss" scoped>

    .ol-content {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      line-height: 1.5;
      color: #24292e;
      box-sizing: border-box;
      padding-left: 0;
      margin-top: 0;
      margin-right: -8px;
      margin-left: -8px;
      flex-wrap: wrap !important;
      margin-bottom: 1px !important;
      list-style: none !important;
      display: flex !important;
    }

    .li-content {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      line-height: 1.5;
      color: #24292e;
      list-style: none !important;
      box-sizing: border-box;
      width: 30%;
      align-content: stretch !important;
      margin-bottom: 20px !important;
      display: flex !important;
      padding-right: 8px !important;
      padding-left: 8px !important;
    }

    #Box {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      line-height: 1.5;
      color: #24292e;
      list-style: none !important;
      box-sizing: border-box;
      background-color: #fff;
      border: 1px solid #d1d5da;
      border-radius: 3px;
      width: 100% !important;
      padding: 16px !important;
      display: flex !important;
    }

    #content {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
      font-size: 14px;
      line-height: 1.5;
      color: #24292e;
      list-style: none !important;
      box-sizing: border-box;
      display: flex;
      width: 100%;
      flex-direction: column;
      margin-bottom: 1px;
    }
    .el-icon-delete {
      float: right;
      margin-right: 10px;
    }
    .el-icon-view {
      float: right;
    }
</style>